<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>推荐管理</title>
<meta name="decorator" content="default"/>
<script type="text/javascript" src="${ctxStatic}/common/model.js"></script>
<script type="text/javascript" src="${ctxStatic}/crop/cropzoom/1.2/plugin/jquery.cropzoom.js"></script>

<script type="text/javascript">

	//url
	var listUrl = '${ctx}/cms/recommen/';
	var cardUrl = '${ctx}/cms/recommen/form';

	var srcImage = '${ctxStatic}/crop/cropzoom/1.2/demo/chicas1024.jpg';
	var cropAction = '${ctx}/cms/imageinfo/cropImage';
	
	//按钮状态  {状态值为 0 不可用 ；1 可用}
	var buttonStatus = {};
	buttonStatus.add 	= {add:{id:'btnAdd',st:0},edit:{id:'btnEdit',st:0},save:{id:'btnSubmit',st:1},cancel:{id:'btnCancel',st:1},back:{id:'btnBack',st:1}};
	buttonStatus.edit	= {add:{id:'btnAdd',st:0},edit:{id:'btnEdit',st:0},save:{id:'btnSubmit',st:1},cancel:{id:'btnCancel',st:1},back:{id:'btnBack',st:1}};
	buttonStatus.save   = {add:{id:'btnAdd',st:1},edit:{id:'btnEdit',st:1},save:{id:'btnSubmit',st:0},cancel:{id:'btnCancel',st:0},back:{id:'btnBack',st:1}};
	buttonStatus.cancel = {add:{id:'btnAdd',st:1},edit:{id:'btnEdit',st:"${not empty recommen.id?'1':'0'}"},save:{id:'btnSubmit',st:0},cancel:{id:'btnCancel',st:0},back:{id:'btnBack',st:1}}
	buttonStatus.other  = {add:{id:'btnAdd',st:1},edit:{id:'btnEdit',st:"${not empty recommen.id?'1':'0'}"},save:{id:'btnSubmit',st:0},cancel:{id:'btnCancel',st:0},back:{id:'btnBack',st:1}};

	$(document).ready(function() {
		//$("#name").focus();
		$("#inputForm").validate({
			submitHandler: function(form){
				loading('正在提交，请稍等...');
				form.submit();
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				$("#messageBox").text("输入有误，请先更正。");
				if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
					error.appendTo(element.parent().parent());
				} else {
					error.insertAfter(element);
				}
			}
		});
		
		var currentOpt = "${opt}";
		if(currentOpt==null||currentOpt==''){
			currentOpt = 'other';
		}
		var btnStatus = buttonStatus[currentOpt];
		freshButtonStatus(btnStatus);
		if(currentOpt=='add' || currentOpt=='edit'){
			setAllPageEnable(jQuery("#formAreaId"));
		}else{
			setAllPageDisable(jQuery("#formAreaId"));
		}
	   
	});
	
	function add(){ //新增记录
		var url = cardUrl+"?opt=add";
		window.location.href = url;
	}
	
	function edit(){ //修改记录
		var btnStatus = buttonStatus['edit'];
		freshButtonStatus(btnStatus);
		setAllPageEnable(jQuery("#formAreaId"));
	}
	
	function cancel(){ //取消操作
		var btnStatus = buttonStatus['cancel'];
		freshButtonStatus(btnStatus);
		setAllPageDisable(jQuery("#formAreaId"));
	}
	
	function back(){ //返回
		var btnStatus = buttonStatus['other'];
		freshButtonStatus(btnStatus);
		setAllPageDisable(jQuery("#formAreaId"));
		parent.freshTabs(jQuery(window.parent.document).find('[link="iframeContent1"]'));
	}
	
	function openCropWindow(obj,inputId){
		var url = "/soccercms/a/cms/imageinfo/imageView";
		var imgObj = jQuery(obj).parent().find('ol li img')[0];
		var imgUrl = jQuery(imgObj).attr('url');
		if(imgUrl == null || imgUrl == '' ){
			alertx("请选择图片");
			return ;
		}  //debugger;
		if(inputId == null){
			inputId = jQuery(obj).parent().find('input[type="hidden"][class*="input"]').attr('id');
		}
		imgUrl = encodeURIComponent(imgUrl);
		url = url+'?imgUrl='+imgUrl;
		url = url+"&inputId="+inputId;
		windowOpen(url,"图片裁剪",1200,800);
		
	}
	
	function updateImagePath(id,path){
		var inputObj = jQuery('#'+id);
		inputObj.val(path);
		debugger;
		var divObj = inputObj.parents('div')[0];
		
		jQuery('#'+id+'Preview',divObj).children().remove();
		var li = "<li><img src=\""+path+"\" url=\""+path+"\" style=\"max-width:100px;max-height:100px;_height:100px;border:0;padding:3px;\">";//
		li += "&nbsp;&nbsp;<a href=\"javascript:\" onclick=\"nameImageDel(this);\">×</a></li>";
		jQuery('#'+id+'Preview',divObj).append(li);
		var imgObj = jQuery('#'+id+'Preview',divObj).find('img');
		imgObj.attr('src',path);
		imgObj.attr('url',path);
	}
	
	function zoomImage(obj){
		var imgObj = jQuery(obj).parent().find('ol li img')[0];
		var imgUrl = jQuery(imgObj).attr('url');
		if(imgUrl == null || imgUrl == '' ){
			alertx("请选择图片");
			return ;
		}
		jQuery('[name="extImage"]').each(function(i,v){
			var inputId =  jQuery(this).find('input[type="hidden"][class*="input"]').attr('id');
			updateImagePath(inputId,imgUrl);
		});
		
	}
	
</script>
</head>
<body>
	<form:form id="inputForm" modelAttribute="recommen" action="${ctx}/cms/recommen/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>	
		
		<div class="breadcrumb form-search" id="toolButtonId">
			<shiro:hasPermission name="cms:recommen:edit">
				<input id="btnAdd" class="btn btn-primary" type="button" value="新 增" onclick="add()"/>&nbsp;
				<input id="btnEdit" class="btn btn-primary" type="button" value="修 改" onclick="edit()"/>&nbsp;
				<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;
				<input id="btnCancel" class="btn" type="button" value="取 消" onclick="cancel()"/>
			</shiro:hasPermission>
			<input id="btnBack" class="btn" type="button" value="返 回" onclick="back()"/>
		</div>
		
		<div id="formAreaId">	
			<div class="control-group">
				<label class="control-label">编码：</label>
				<div class="controls">
					<form:input path="code" htmlEscape="false" maxlength="50" class="input-xlarge required"/>
					<span class="help-inline"><font color="red">*</font> </span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">标题：</label>
				<div class="controls">
					<form:input path="name" htmlEscape="false" maxlength="100" class="input-xlarge required"/>
					<span class="help-inline"><font color="red">*</font> </span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">分组类型：</label>
				<div class="controls">
					<form:select path="grouptype.id" class="input-xlarge ">
						<%-- <form:option value="" label="--请选择--"/> --%>
						<form:options items="${fns:getDictList('grouptype')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">推荐类型：</label>
				<div class="controls">
					<form:select path="rescomtype.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('rescomtype')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">显示类型：</label>
				<div class="controls">
					<form:select path="displaytype.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('displaytype')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">所属栏目：</label>
				<div class="controls">
				<sys:treeselect id="category" name="category.id" value="${recommen.category.id}" labelName="" labelValue="${fns:getCategory(recommen.category.id).name}"
					title="所属栏目" url="/cms/category/treeData" cssClass="input-small" allowClear="true" notAllowSelectParent="true"/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">TAG标签：</label>
				<div class="controls">
					<form:input path="tag" htmlEscape="false" maxlength="64" class="input-xlarge "/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">链接类型：</label>
				<div class="controls">
					<form:select path="linktype.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('linktype')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">链接：</label>
				<div class="controls">
					<form:input path="links" htmlEscape="false" maxlength="64" class="input-xlarge "/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">内容类型：</label>
				<div class="controls">
					<form:select path="infotype.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('infotype')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">小标位置：</label>
				<div class="controls">
					<form:select path="infoposition.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('infoposition')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">关联文章：</label>
				<div class="controls">
					<form:input path="article" htmlEscape="false" maxlength="64" class="input-xlarge "/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">源图：</label>
				<div class="controls">
					<%-- <form:input path="imageid" htmlEscape="false" maxlength="500" class="input-xlarge "/> --%>
					<form:hidden id="nameImage" path="imageid" htmlEscape="false" maxlength="255" class="input-xlarge"/>
					<sys:ckfinder input="nameImage" type="images" uploadPath="/cms/recommen" selectMultiple="false" maxWidth="100" maxHeight="100"/>
					<input type="button" class="btn" value="生成缩略图" onclick="zoomImage(this)">
				
				</div>
			</div>
			
			<c:forEach items="${recommen.imageinfoList}" var="imageinfo" varStatus="status">
			<div class="control-group" name="extImage">
				<input type="hidden" attrname="id" name="imageinfoList[${status.index }].imagetype.id" value="${imageinfo.imagetype.id}"/>
				<label class="control-label">${fns:getDictByTypeValue(imageinfo.imagetype.id,'imagetype').label}：</label>
				<div class="controls">
					<form:hidden id="nameImage${status.index}" path="imageinfoList[${status.index }].path" htmlEscape="false" maxlength="255" class="input-xlarge"/>
					<sys:ckfinder input="nameImage${status.index}" type="images" uploadPath="/cms/recommen" selectMultiple="false" maxWidth="100" maxHeight="100"/>
					<input type="button" class="btn" value="剪裁" onclick="openCropWindow(this,'nameImage${status.index}')">
				</div>
			</div>
			</c:forEach>

			<div class="control-group">
				<label class="control-label">顺序：</label>
				<div class="controls">
					<form:input path="sort" htmlEscape="false" maxlength="11" class="input-xlarge  digits"/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">发布状态：</label>
				<div class="controls">
					<form:select path="ispublish.id" class="input-xlarge ">
						<form:option value="" label="--请选择--"/>
						<form:options items="${fns:getDictList('publishstatus')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">描述：</label>
				<div class="controls">
					<form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="2000" class="input-xxlarge "/>
				</div>
			</div>
		</div>
	</form:form>
	<div style="height: 50px;width: 100%;"></div>
</body>
</html>